<template>
  <span
    class="pl-[15px] text-gray-500 font-semibold text-xs px-3 py-2 cursor-pointer"
    :class="{ 'tab-item-actived': active }"
    ><slot
  /></span>
</template>

<script setup>
defineProps({
  active: {
    type: Boolean,
    default: false,
  },
});
</script>

<style>
.tab-item-actived {
  @apply border-b-[2px]  border-blue-500 text-blue-500 font-bold;
}
</style>
